
import React, { Component, useEffect, useState } from 'react'
import PropsRoute from "../News/index";
import Me from "../me/index"
import Message from "../message/index"
import Todo from "../todo/index"
import { NavLink, Navigate, Route, Routes, useNavigate } from "react-router-dom";
import { NavBar, TabBar } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'

export default function Index() {
  const navigate = useNavigate();
  const [activeKey, setactiveKey] = useState('')
  const [tabs, settabs] = useState([])
  useEffect(() => {
    setactiveKey('/home/News')
  }, [])
  useEffect(() => {
    settabs([
      {
        key: '/home/News',
        title: '首页',
        icon: <AppOutline />,
      },
      {
        key: '/home/todo',
        title: '我的待办',
        icon: <UnorderedListOutline />,
      },
      {
        key: '/home/message',
        title: '我的消息',
        icon: <MessageOutline />,
      },
      {
        key: '/home/me',
        title: '个人中心',
        icon: <UserOutline />,
      },
    ])
  }, [])
  const setRouteActive = (value) => {
    // // history.push(value)
    // let Nnavigates = useNavigate()
    setactiveKey(value)
    console.log(value)
    navigate(value)
  }
  return (
    <div>
      <div>
        <TabBar style={{ position: 'fixed', height: '100%', width: '100%', bottom: '0px',left: 0}} activeKey={activeKey} onChange={(value) => { setRouteActive(value) }}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} selected={activeKey === item.key} />
          ))
          }
        </TabBar>
        <ul>
          {/* 传参方式-params */}
          <li><NavLink to="1/11">prop-params</NavLink></li>
          {/* 传参方式-search */}
          <li><NavLink to="/home/searchTest?id=2&code=22">prop-search</NavLink></li>
          {/*
                            react-router-dom v5 传参写法:
                            <NavLink to={{pathname:'/multilevelRoute/stateTest',state:{id:'3',code:33}}}>prop-               state</NavLink>
                        */}
          {/* 传参方式-state */}
          <li><NavLink to="/home/stateTest" state={{ id: '3', code: 33 }}>prop-state</NavLink></li>
        </ul>
      </div>
      <div>
        <Routes>
          {/*
                            react-router-dom v5写法 path = "全路径":
                            <Route path="/multilevelRoute/search" element={<PropsRoute></PropsRoute>}></Route>
                        */}
          {/* 
                            react-router-dom v6写法
                         */}
          {/* <Route path="/paramsTest/:id/:code" element={<PropsRoute>params</PropsRoute>}></Route>
                        <Route path="/searchTest" element={<PropsRoute>search</PropsRoute>}></Route> */}
          <Route path="News" element={<PropsRoute></PropsRoute>}></Route>
          <Route path="Me" element={<Me></Me>}></Route>
          <Route path="Message" element={<Message></Message>}></Route>
          <Route path="Todo" element={<Todo></Todo>}></Route>


          <Route path="/*" element={<Navigate to="News" />}></Route>
        </Routes>
      </div>
    </div>
  )
}
